<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head
	th:replace="header/h5header::h5header('帅小铺-实体商户社群服务平台⼁商铺出租转让⼁门面出租转让⼁店铺出租转让⼁找铺租铺⼁找店求租',
'/assets/H5/css/index.css,/assets/H5/css/bus.css,/assets/css/myswiper.css',
'/assets/H5/js/flexible.js,/assets/js/swiper.min.js')">
</head>
<body style="font-size: 16px;">

	<div class="container  cont-footer2" style="padding-top: 0">
		<!--轮播-->
		<div class="banner-wrap">
			<!-- 搜索条 -->
			<div class="header-v1_2 clearfix1">
				<div class="area-v1">
					<a href="/city">
						<p>
							<span th:text="${cityname}">重庆</span>
							<i class="icon icon-unfold"></i>
						</p>
					</a>
				</div>
				<div class="sign-in">
					<a class="need-login" href="/cq/personal"> 
						<span class="icon icon-user"></span>
					</a>
				</div>
				<a class="search-v1_2" href="/h5search">
					<span class="icon icon-search"></span>
					<p>找商铺 租商铺</p>
				</a>
			</div>

			<!--banner轮播-->
			<div id="swiper-banner">
				<div
					class="swiper-container firstSwiper swiper-container-horizontal swiper-container-ios">
					<div class="swiper-wrapper swiper-no-swiping">
						<div class="swiper-slide" th:each="item:${banners}">
							<a th:href="${item.bannerHref}">
								<img class="swiper-lazy swiper-lazy-loaded" th:src="${item.url}" alt="">
							</a>
						</div>
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination swiper-pagination-bullets" style="display: none;">
						<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
					</div>
					<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
						
				</div>
			</div>
		</div>

		<div class="center">
			<!-- 金刚位-常用入口 -->
			<div class="entrance">
				<div class="bd">
					<ul>
						<li th:each="item,columnStat:${columns}">
							<a th:href="${'/channel/' + item.columnId}">
								<div class="pic">
									<img class="lazy-timeout-click" th:src="${item.colIcon}" th:alt="${item.columnName}">
								</div>
								<div class="text">
									<p th:text="${item.columnName}"></p>
								</div>
							</a>
						</li>
						<li>
							<a href="/ask">
								<div class="pic">
									<img class="lazy-timeout-click" src="/assets/H5/images/icon/t4.png" alt="买房问问">
								</div>
								<div class="text">
									<p>买房问问</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- 推荐 -->
			<div class="row">
				<a href="/cq/project">
					<div class="hd">
						<h2>为你推荐</h2>
					</div>
				</a>
				<div class="bd">
					<div class="tjlp-v1_2">
						<div class="house-list hl-padding">
							<div class="house-list hl-padding card-list-box" id="listUl">
    							
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer-auditV1_2">
	    <ul>
	        <li>
	            <a href="https://m.julive.com/topic/yinsixieyi.html" title="">隐私协议</a>
	        <li>重庆骐帅科技有限公司</li>
	        <li>网络经营许可证：渝ICP备18009391号-2</li>
	        <li>
	            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=xxxxx" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;color: #a9bacf;">
	            	<img src="//static.julive.com/m/images/beian.png?t=20200715_205041" style="float:left;">
	            	<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">渝公网安备 xxxxxxx号</p>
	            </a>
	        </li>
	    </ul>
	</div>
<script type="text/html" id="qqwww">
	<!-- 有视频 -->
	{{# if(d.videoUrl != null && d.videoUrl != '' ){ }}
		<div class="house-item6 we">
			<a class="" href="/details/{{d.articleId}}">    
				<div class="list-con click-position">
					<div class="media-house2">
                       	<div class="pic click-position">
   							<img class="lazy-timeout-click" src="{{d.coverVideo}}" alt="">
               			</div>
						<div class="text">
   							<div class="house-name">
       							<h4 class="click-position">{{d.title}}</h4>
   							</div>
                            <p class="house-infor click-position" style="font-size: 0.32rem;text-align: justify;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;white-space: inherit;-webkit-box-orient: vertical;word-break: break-all;color: #7f7f7f;height: 1.1rem;">
       							{{d.summary}}
   							</p>
   							<div class="dynamic">
								<span class="">{{d.user.nickName}}</span> 
								<span class="">{{d.readSize}}阅读</span> 
								<span class="">{{d.time}}</span> 
   							</div>
						</div>
	  				</div>
				</div>
			</a>
		</div>
	{{# } else { }}
		{{# if(d.imgs.length < 2 ){ }}
			<div class="house-item6">
    			<a class="" href="/details/{{d.articleId}}">    
    				<div class="list-con click-position">
        				<div class="media-house2">
							{{# if(d.coverImage != '' ){ }}
		                		<div class="pic click-position">
		                			<img class="lazy-timeout-click" src="{{d.coverImage}}" alt="">
                    			</div>
							{{#  } }}
   							<div class="text">
       							<div class="house-name">
           							<h4 class="click-position">{{d.title}}</h4>
       							</div>
                                <p class="house-infor click-position" style="font-size: 0.32rem;text-align: justify;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;white-space: inherit;-webkit-box-orient: vertical;word-break: break-all;color: #7f7f7f;height: 1.1rem;">
           							{{d.summary}}
       							</p>
       							<div class="dynamic">
										<span class="">{{d.user.nickName}}</span> 
									<span class="">{{d.readSize}}阅读</span> 
									<span class="">{{d.time}}</span> 
       							</div>
   							</div>
			  			</div>
			 		</div>
 				</a>
			</div>
		{{# } else { }}
	    	<div class="house-item6 Headline-list">
 				<div class="Headline-col ew-datagrid-item"> 
					<a href="/details/{{d.articleId}}" class="Headline-colB"> 
						<div class="Headline-colB-d1">
							<h3 class="Headline-colB-H3" style="font-size: .4267rem;">{{d.title}}</h3> 
						</div> 
						<div class="Headline-colB-img"> 
							<ul>   
								{{# layui.each(d.imgs, function(index, item){ }}
									{{# if(index < 3 ){ }}
										<li class="Headline-colB-li">
											<img class="diaryContent-IlImg" src="{{item}}" alt="" />
										</li>
									{{#  } }}
								{{# }); }}
							</ul> 
						</div> 
						<div style="margin-top: 0.2rem;"> 
							<span class="Headline-colB-rS">{{d.user.nickName}}</span> 
							<span class="Headline-colA-rS">{{d.readSize}}阅读</span> 
							<span class="Headline-colB-rS">{{d.time}}</span> 
						</div> 
					</a>   
				</div>
			</div>   								
		{{#  } }}
	{{#  } }}

</script>	
	

<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'dataGrid', 'element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var formX = layui.formX;
    var setter = layui.setter;
    var mynotice = layui.mynotice;
    var admin = layui.admin;
    var $ax = layui.ax;
    var util = layui.util;
    var dataGrid = layui.dataGrid;
    var element = layui.element;
    
    /* 轮播 */
	var mySwiper = new Swiper('.swiper-container', {
		direction : 'horizontal', // 垂直切换选项
		autoplay : {
			delay : 5000,
			disableOnInteraction : false,
		}, // 自动切换
		loop : true, // 循环模式选项
		pagination : { // 分页器
			el : '.swiper-pagination',
			type : 'bullets',
			clickable : true,
			renderProgressbar : function(progressbarFillClass) {
				return '<span class="' + progressbarFillClass + '"></span>';
			}
		},
		navigation : { // 如果需要前进后退按钮
			nextEl : '.swiper-button-next',
			prevEl : '.swiper-button-prev',
		}

	})
    
	dataGrid.render({
        elem: '#listUl',  // 容器
        templet: '#qqwww',  // 模板
        url: '/loadmore/h5/rec',  // 数据接口
        loadMore: {limit: 10},  // 开启分页
        done: function(res, curr, count){
        	
        }
    });
    
});

</script>

</body>
</html>